import { ref, onMounted } from 'vue'
import { fetchActivityData } from '@/services/api'

export function useActivityData(activityId) {
  const mainData = ref(null)
  const splitsData = ref(null)
  const detailData = ref(null)
  const loading = ref(true)
  const error = ref(null)

  const fetchData = async () => {
    try {
      loading.value = true
      const [main, splits, detail] = await Promise.all([
        fetchActivityData(activityId, 'main'),
        fetchActivityData(activityId, 'splits'),
        fetchActivityData(activityId, 'details')
      ])
      mainData.value = main
      splitsData.value = splits
      detailData.value = detail
    } catch (err) {
      error.value = err
    } finally {
      loading.value = false
    }
  }

  onMounted(fetchData)

  return { mainData, splitsData, detailData, loading, error, refresh: fetchData }
}